<template>
    <div class="section-header text-center">
        <div class="subtitle subtitle--style2 justify-content-center">
            <img src="/images/icon/home2/1.png" alt="star icon">
            <p class="mb-0">Latest Course</p>
        </div>
        <h2>Our Best Popular Courses</h2>
        <p class="style2">Take your career to unique heights in this competitive job market. All the categories
            you need are here. Choose your most preferred course.</p>
    </div>
    <div class="categories__wrapper">
        <SwiperSlide :dataList="categoryListTwo" :breakpoints="breakpoints" :loop="true" :speed="speed"
            :pagination="pagination" :grabCursor="grabCursor">
            <template #content="{ item }">
                <div class="swiper-slide">
                    <div class="categories__item">
                        <div class="categories__item-inner">
                            <img :src="item.img" alt="category icon">
                            <div class="categories__item-content">
                                <h5 class="style4"><nuxt-link to="/course-category">{{ item.category }}</nuxt-link> </h5>
                                <p>20+ Course</p>
                                <nuxt-link to="/course-category" class="categories__item-btn">
                                    <i class="fa-solid fa-arrow-right"></i> </nuxt-link>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </SwiperSlide>
    </div>
</template>

<script>
import SwiperSlide from "@/components/base/slots/SwiperSlide.vue";
export default {
    components: { SwiperSlide },

    props: {
        categoryListTwo: {
            type: Array,
            default: () => [],
        },
    },

    data() {
        return {
            spaceBetween: 24,
            grabCursor: true,
            loop: true,
            slidesPerView: 1,
            breakpoints: {
                576: {
                    slidesPerView: 2,
                },
                768: {
                    slidesPerView: 3,
                },
                992: {
                    slidesPerView: 4,
                    spaceBetween: 15,
                },
                1400: {
                    slidesPerView: 5,
                    spaceBetween: 25,
                }
            },
            speed: 3000,
            pagination: {
                el: ".slider__pagination-1",
                clickable: true
            },

            
        }
    },

}
</script>